package org.eesgmbh.gimv.samples.openstreetmap.client;

import org.eesgmbh.gimv.client.widgets.Viewport;

import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Image;

public class OpenStreetMapSampleLayout {

	private AbsolutePanel rootWidget;
	private Image chartImage;
	private Viewport primaryViewport;
	private HTML zoomBox;
	private Image shiftLeft;
	private Image shiftRight;
	private Image shiftUp;
	private Image shiftDown;

	private Image smallMap;
	private Viewport overviewViewport;
	private DockLayoutPanel overview;
	private int handleWidth = 10;
	private HTML leftHandle;
	private HTML rightHandle;
	private HTML centerHandle;
	private HTML topHandle;
	private HTML bottomHandle;
	private HTML topleftHandle;
	private HTML toprightHandle;
	private HTML bottomleftHandle;
	private HTML bottomrightHandle;

	public OpenStreetMapSampleLayout() {
		rootWidget = new AbsolutePanel();
		rootWidget.setWidth("850px");
		rootWidget.setHeight("566px");

		chartImage = new Image();

		primaryViewport = new Viewport("850px", "566px");
		primaryViewport.add(chartImage);

		rootWidget.add(primaryViewport, 0, 0);

		zoomBox = new HTML();
		DOM.setStyleAttribute(zoomBox.getElement(), "opacity", "0.25");
		DOM.setStyleAttribute(zoomBox.getElement(), "filter", "alpha(opacity=25)"); //IE
		DOM.setStyleAttribute(zoomBox.getElement(), "outline", "black dashed 1px");
		DOM.setStyleAttribute(zoomBox.getElement(), "visibility", "hidden");
		primaryViewport.add(zoomBox);

		shiftLeft = new Image("img/arrow-left.png");
		DOM.setStyleAttribute(shiftLeft.getElement(), "cursor", "pointer");
		rootWidget.add(shiftLeft, 780, 30);

		shiftRight = new Image("img/arrow-right.png");
		DOM.setStyleAttribute(shiftRight.getElement(), "cursor", "pointer");
		rootWidget.add(shiftRight, 820, 30);

		shiftUp = new Image("img/arrow-up.png");
		DOM.setStyleAttribute(shiftUp.getElement(), "cursor", "pointer");
		rootWidget.add(shiftUp, 802, 7);

		shiftDown = new Image("img/arrow-down.png");
		DOM.setStyleAttribute(shiftDown.getElement(), "cursor", "pointer");
		rootWidget.add(shiftDown, 802, 48);

		overviewViewport = new Viewport("213px", "142px");
		DOM.setStyleAttribute(overviewViewport.getElement(), "outline", "black solid 2px");

		overview = new DockLayoutPanel(Unit.PX);
		DOM.setStyleAttribute(overview.getElement(), "border", "red dashed 1px");
		DOM.setStyleAttribute(overview.getElement(), "zIndex", "9999");

		leftHandle = buildHandleHTML(handleWidth + "px", "100%", "e-resize", "#DCDCDC", 0.4);
		rightHandle = buildHandleHTML(handleWidth + "px", "100%", "e-resize", "#DCDCDC", 0.4);
		centerHandle = buildHandleHTML("100%", "100%", "move", "#FFFFFD", 0.4);
		topHandle = buildHandleHTML("100%", handleWidth + "px", "n-resize", "#DCDCDC", 0.4);
		bottomHandle = buildHandleHTML("100%", handleWidth + "px", "n-resize", "#DCDCDC", 0.4);
		topleftHandle = buildHandleHTML(handleWidth + "px", handleWidth + "px", "nw-resize", "#DCDCDC", 0.4);
		toprightHandle = buildHandleHTML(handleWidth + "px", handleWidth + "px", "ne-resize", "#DCDCDC", 0.4);
		bottomleftHandle = buildHandleHTML(handleWidth + "px", handleWidth + "px", "sw-resize", "#DCDCDC", 0.4);
		bottomrightHandle = buildHandleHTML(handleWidth + "px", handleWidth + "px", "se-resize", "#DCDCDC", 0.4);

		HorizontalPanel topRow = buildHorizontalPanel(handleWidth + "px", "100%", topleftHandle, topHandle, toprightHandle);
		HorizontalPanel bottomRow = buildHorizontalPanel(handleWidth + "px", "100%", bottomleftHandle, bottomHandle, bottomrightHandle);

		overview.addNorth(topRow, handleWidth);
		overview.addSouth(bottomRow, handleWidth);
		overview.addEast(rightHandle, handleWidth);
		overview.addWest(leftHandle, handleWidth);
		overview.add(centerHandle);

		smallMap = new Image();
		DOM.setStyleAttribute(smallMap.getElement(), "zIndex", "999");
		overviewViewport.add(smallMap);
		overviewViewport.add(overview);

		rootWidget.add(overviewViewport, 635, 422);
	}

	private HTML buildHandleHTML(String width, String height, String cursor, String color, double transparancy) {
		HTML container = new HTML();
		container.setWidth(width);
		container.setHeight(height);
		DOM.setStyleAttribute(container.getElement(), "cursor", cursor);
		DOM.setStyleAttribute(container.getElement(), "backgroundColor", color);
		DOM.setStyleAttribute(container.getElement(), "opacity", Double.toString(transparancy));
		DOM.setStyleAttribute(container.getElement(), "mozOpacity", Double.toString(transparancy));
		DOM.setStyleAttribute(container.getElement(), "filter", "alpha(opacity = " + Double.toString(transparancy*100) + ")");
		return container;
	}

	private HorizontalPanel buildHorizontalPanel(String height, String width, HTML left, HTML center, HTML right) {
		HorizontalPanel panel = new HorizontalPanel();
		panel.setHeight(height);
		panel.setWidth(width);
		panel.add(left);
		panel.setCellWidth(left, height);
		panel.add(center);
		panel.setCellWidth(center, width);
		panel.add(right);
		panel.setCellWidth(right, height);
		return panel;
	}

	public AbsolutePanel getRootWidget() {
		return this.rootWidget;
	}

	public Image getChartImage() {
		return this.chartImage;
	}

	public Viewport getPrimaryViewport() {
		return this.primaryViewport;
	}

	public HTML getZoomBox() {
		return this.zoomBox;
	}

	public Image getShiftLeft() {
		return this.shiftLeft;
	}

	public Image getShiftRight() {
		return this.shiftRight;
	}

	public Image getShiftUp() {
		return this.shiftUp;
	}

	public Image getShiftDown() {
		return this.shiftDown;
	}

	public DockLayoutPanel getOverview() {
		return overview;
	}

	public Viewport getOverviewViewport() {
		return overviewViewport;
	}

	public Image getSmallMap() {
		return smallMap;
	}

	public HTML getLeftHandle() {
		return leftHandle;
	}

	public HTML getRightHandle() {
		return rightHandle;
	}

	public HTML getCenterHandle() {
		return centerHandle;
	}

	public HTML getTopHandle() {
		return topHandle;
	}

	public HTML getBottomHandle() {
		return bottomHandle;
	}

	public HTML getTopleftHandle() {
		return topleftHandle;
	}

	public HTML getToprightHandle() {
		return toprightHandle;
	}

	public HTML getBottomleftHandle() {
		return bottomleftHandle;
	}

	public HTML getBottomrightHandle() {
		return bottomrightHandle;
	}

	public int getMinOverviewWidth() {
		return handleWidth * 3;
	}

	public int getMinOverviewHeight() {
		return handleWidth * 3;
	}
}
